/* Noirparts.com storefront — vanilla JS SPA driven by /data/*.json (exported from the NoirParts_Master sheet) */

const DATA_URLS = {
  categories: '/web/content/1965/np_categories.json',
  products: '/web/content/1970/np_products.json',
  vehicles: '/web/content/1967/np_vehicles.json',
  compatByMod: '/web/content/1968/np_compat_by_mod.json',
  compatByProduct: '/web/content/1969/np_compat_by_product.json',
};

const state = {
  categories: [],
  products: [],
  productsById: {},
  categoriesById: {},
  vehicles: [],
  compatByMod: {},
  compatByProduct: {},
  cart: loadCart(),
  selectedVehicle: loadVehicle(), // {makeName, modelLineName, modelName, mod:{id,name,engine,...}}
  loaded: false,
};

const CURRENCY = '₹';
const MAKE_ACRONYMS = new Set(['BMW','BYD','VW']);
function cleanProductName(name){
if(!name || !name.includes(';')) return name;
const parts = name.split(';').map(s => s.trim());
if(parts.length !== 2 || !parts[0] || !parts[1]) return name.replace(/;\s*/g, ' - ').trim();
let [base, axle] = parts;
const sideMatch = base.match(/\s+(Left|Right)$/i);
if(sideMatch){
const side = sideMatch[1];
base = base.slice(0, sideMatch.index).trim();
return `${axle} ${side} ${base}`;
}
return `${axle} ${base}`;
}
const SITE_TITLE_SUFFIX = ' | NoirParts';
const DEFAULT_META_DESCRIPTION = 'Shop 1800+ verified brake pads, discs, drums, calipers, cylinders and more from Bosch, Brembo, Ferodo, HELLA and other trusted brands. Instant fitment check by make, model and engine. COD available across India.';
function setPageMeta(title, description){
document.title = title ? `${title}${SITE_TITLE_SUFFIX}` : 'NoirParts — Genuine Brake Parts for 2700+ Indian Vehicles';
let m = document.querySelector('meta[name="description"]');
if(!m){ m = document.createElement('meta'); m.setAttribute('name','description'); document.head.appendChild(m); }
m.setAttribute('content', description || DEFAULT_META_DESCRIPTION);
}
function updateProductJsonLd(ld){
let el = document.getElementById('productJsonLd');
if(!ld){ if(el) el.remove(); return; }
if(!el){ el = document.createElement('script'); el.type = 'application/ld+json'; el.id = 'productJsonLd'; document.head.appendChild(el); }
el.textContent = JSON.stringify(ld);
}
function properMake(name){
  const str = (name==null?'':String(name));
  if (MAKE_ACRONYMS.has(str.toUpperCase())) return str.toUpperCase();
  return str.toLowerCase().replace(/(^|[\s-])([a-z])/g, (m, sep, ch) => sep + ch.toUpperCase());
}
function fixOrdinals(name){
  const str = (name==null?'':String(name));
  return str.replace(/(\d+)(st|nd|rd|th)\b/gi, (m, num, suf) => num + suf.toLowerCase());
}
const PLACEHOLDER_SVG = `<div class="ph-fallback"><svg viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg><div>Image coming soon</div></div>`;
function productPlaceholder(p){
  const cat = p && state.categoriesById && state.categoriesById[p.category_id];
  const icon = cat ? categoryIcon(cat.name) : CAT_ICONS.default;
  const label = cat ? esc(cat.name) : 'Photo coming soon';
  return `<div class="ph-fallback-icon">${icon}<div class="ph-fallback-label">${label}</div></div>`;
}

/* ---------------- persistence ---------------- */
function loadCart(){
  try{ return JSON.parse(localStorage.getItem('np_cart')||'[]'); }catch(e){ return []; }
}
function saveCart(){
  localStorage.setItem('np_cart', JSON.stringify(state.cart));
  updateCartCount();
}
function loadVehicle(){
  try{ return JSON.parse(localStorage.getItem('np_vehicle')||'null'); }catch(e){ return null; }
}
function saveVehicle(v){
  state.selectedVehicle = v;
  if(v) localStorage.setItem('np_vehicle', JSON.stringify(v));
  else localStorage.removeItem('np_vehicle');
  renderVehiclePickerLabel();
}

/* ---------------- boot ---------------- */
async function boot(){
  const [categories, products, vehicles, compatByMod, compatByProduct] = await Promise.all(
    Object.values(DATA_URLS).map(u => fetch(u).then(r => r.json()))
  );
  state.categories = categories;
  state.products = products;
  products.forEach(p => { p.name = cleanProductName(p.name); });
  state.vehicles = vehicles;
  state.compatByMod = compatByMod;
  state.compatByProduct = compatByProduct;
  state.productsById = Object.fromEntries(products.map(p => [p.id, p]));
  state.categoriesById = Object.fromEntries(categories.map(c => [c.id, c]));
  state.loaded = true;

  renderCatNav();
  renderFooter();
  populateVehicleMakes();
  renderVehiclePickerLabel();
  updateCartCount();
  document.getElementById('year').textContent = new Date().getFullYear();

  window.addEventListener('hashchange', route);
  route();

}

/* ---------------- helpers ---------------- */
function leafCategories(){
  return state.categories.filter(c => c.leaf);
}
function topCategory(){
// Prefer the level-1 category that actually has products under it (the catalog may only
// cover a subset of the full Category_Master taxonomy), falling back to the first level-1
// category if none have products yet.
const l1 = state.categories.filter(c => c.level === 1);
let best = null, bestCount = -1;
l1.forEach(c => { const n = productCountInScope(c.id); if(n > bestCount){ best = c; bestCount = n; } });
return best || l1[0];
}
function catChildren(id){
  return state.categories.filter(c => c.parent === id).sort((a,b) => (a.order||0)-(b.order||0));
}
function catBreadcrumb(id){
  const chain = [];
  let cur = state.categoriesById[id];
  while(cur){ chain.unshift(cur); cur = cur.parent ? state.categoriesById[cur.parent] : null; }
  return chain;
}
/* Categories that actually have products directly assigned — used for nav & homepage tiles
   so the site adapts to however deep/shallow the category tree is, instead of assuming a fixed level. */
/* All descendant category ids (including itself) for a given category. */
function categoryScopeIds(catId){
const ids = new Set([catId]);
let frontier = [catId];
while(frontier.length){
const next = [];
state.categories.forEach(c => { if(c.parent && frontier.includes(c.parent)){ ids.add(c.id); next.push(c.id); } });
frontier = next;
}
return ids;
}
/* Product count for a category INCLUDING all of its descendants. */
function productCountInScope(catId){
const ids = categoryScopeIds(catId);
let n = 0;
for(let i=0;i<state.products.length;i++){ if(ids.has(state.products[i].category_id)) n++; }
return n;
}
/* Level-2 categories under the top category that actually have products underneath them —
drives top nav + homepage "Shop by category" so browsing follows the real category tree
one level at a time instead of a flat list mixing categories from different depths. */
function shoppableTopCategories(){
const top = topCategory();
if(!top) return [];
return catChildren(top.id).filter(c => productCountInScope(c.id) > 0);
}
function imgFallback(imgEl, productId){
  if(imgEl && imgEl.parentElement) imgEl.parentElement.innerHTML = productPlaceholder(productId ? state.productsById[productId] : null);
}
function fmtPrice(n){ return CURRENCY + Number(n).toLocaleString('en-IN'); }
function discountPct(price, mrp){
  if(!mrp || mrp <= price) return 0;
  return Math.round((1 - price/mrp) * 100);
}
function esc(s){ return (s==null?'':String(s)).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
function qs(sel, root=document){ return root.querySelector(sel); }
function qsa(sel, root=document){ return Array.from(root.querySelectorAll(sel)); }

function showToast(msg){
  const t = document.getElementById('toast');
  t.textContent = msg;
  t.classList.add('show');
  clearTimeout(showToast._tm);
  showToast._tm = setTimeout(() => t.classList.remove('show'), 2200);
}

/* ---------------- category nav / footer ---------------- */
function renderCatNav(){
  const nav = document.getElementById('catNav');
  const cats = shoppableTopCategories();
  nav.innerHTML = `<a href="#/" class="all-link">All Products</a>` +
    cats.map(c => `<a href="#/category/${c.id}">${esc(c.name)}</a>`).join('');
}
function renderFooter(){
  const leaves = leafCategories().filter(c => productCountInScope(c.id) > 0).slice(0, 6);
  document.getElementById('footerCats').innerHTML = leaves.map(c =>
    `<li><a href="#/category/${c.id}">${esc(c.name)}</a></li>`).join('');
  const brands = [...new Set(state.products.map(p => p.brand))].sort();
  document.getElementById('footerBrands').innerHTML = brands.map(b => `<li><a href="#/search/${encodeURIComponent(b)}">${esc(b)}</a></li>`).join('');

}

/* ---------------- vehicle picker ---------------- */
function populateVehicleMakes(){
  const sel = document.getElementById('vpMake');
  sel.innerHTML = `<option value="">Select make</option>` +
    [...state.vehicles].sort((a,b) => properMake(a.name).localeCompare(properMake(b.name))).map(m => `<option value="${esc(m.name)}">${esc(properMake(m.name))}</option>`).join('');
}
function renderVehiclePickerLabel(){
  const label = document.getElementById('vehiclePickerLabel');
  if (!label) return;
  const v = state.selectedVehicle;
  label.textContent = v ? `${properMake(v.makeName)} ${fixOrdinals(v.modelName)} · ${v.mod.name}` : 'Select your vehicle';
}
function wireVehiclePicker(){
  const modal = document.getElementById('vehicleModal');
  const openBtn = document.getElementById('vehiclePickerBtn');
  const closeBtn = document.getElementById('vehicleModalClose');
  const makeSel = document.getElementById('vpMake');
  const lineSel = document.getElementById('vpModelLine');
  const modelSel = document.getElementById('vpModel');
  const modSel = document.getElementById('vpMod');
  const submitBtn = document.getElementById('vpSubmit');
  const clearBtn = document.getElementById('vpClear');

  if (openBtn) openBtn.onclick = () => modal.classList.add('open');
  closeBtn.onclick = () => modal.classList.remove('open');
  modal.onclick = (e) => { if(e.target === modal) modal.classList.remove('open'); };

  makeSel.onchange = () => {
    const make = state.vehicles.find(m => m.name === makeSel.value);
    lineSel.innerHTML = `<option value="">Select model line</option>` +
      (make ? [...make.model_lines].sort((a,b) => fixOrdinals(a.name).localeCompare(fixOrdinals(b.name))).map(l => `<option value="${esc(l.name)}">${esc(fixOrdinals(l.name))}</option>`).join('') : '');
    lineSel.disabled = !make;
    modelSel.innerHTML = `<option value="">Select model</option>`; modelSel.disabled = true;
    modSel.innerHTML = `<option value="">Select modification</option>`; modSel.disabled = true;
    submitBtn.disabled = true;
  };
  lineSel.onchange = () => {
    const make = state.vehicles.find(m => m.name === makeSel.value);
    const line = make && make.model_lines.find(l => l.name === lineSel.value);
    modelSel.innerHTML = `<option value="">Select model</option>` +
      (line ? [...line.models].sort((a,b) => fixOrdinals(a.name).localeCompare(fixOrdinals(b.name))).map(md => `<option value="${esc(md.name)}">${esc(fixOrdinals(md.name))}</option>`).join('') : '');
    modelSel.disabled = !line;
    modSel.innerHTML = `<option value="">Select modification</option>`; modSel.disabled = true;
    submitBtn.disabled = true;
  };
  modelSel.onchange = () => {
    const make = state.vehicles.find(m => m.name === makeSel.value);
    const line = make && make.model_lines.find(l => l.name === lineSel.value);
    const model = line && line.models.find(md => md.name === modelSel.value);
    modSel.innerHTML = `<option value="">Select modification</option>` +
      (model ? [...model.modifications].sort((a,b) => fixOrdinals(a.name).localeCompare(fixOrdinals(b.name))).map(md => `<option value="${md.id}">${esc(fixOrdinals(md.name))} (${esc(md.engine||'')} ${md.start||''}-${md.end||''})</option>`).join('') : '');
    modSel.disabled = !model;
    submitBtn.disabled = true;
  };
  modSel.onchange = () => { submitBtn.disabled = !modSel.value; };

  submitBtn.onclick = () => {
    const make = state.vehicles.find(m => m.name === makeSel.value);
    const line = make.model_lines.find(l => l.name === lineSel.value);
    const model = line.models.find(md => md.name === modelSel.value);
    const mod = model.modifications.find(md => md.id === modSel.value);
    saveVehicle({ makeName: make.name, modelLineName: line.name, modelName: model.name, mod });
    modal.classList.remove('open');
    location.hash = `#/vehicle/${mod.id}`;
  };
  clearBtn.onclick = () => { saveVehicle(null); modal.classList.remove('open'); };
}

function wireSidebarVehiclePicker(){
  const makeSel = document.getElementById('lsMake');
  if(!makeSel) return;
  const lineSel = document.getElementById('lsModelLine');
  const modelSel = document.getElementById('lsModel');
  const modSel = document.getElementById('lsMod');
  const submitBtn = document.getElementById('lsSubmit');

  makeSel.onchange = () => {
    const make = state.vehicles.find(m => m.name === makeSel.value);
    lineSel.innerHTML = `<option value="">Select model line</option>` +
      (make ? [...make.model_lines].sort((a,b) => fixOrdinals(a.name).localeCompare(fixOrdinals(b.name))).map(l => `<option value="${esc(l.name)}">${esc(fixOrdinals(l.name))}</option>`).join('') : '');
    lineSel.disabled = !make;
    modelSel.innerHTML = `<option value="">Select model</option>`;
    modelSel.disabled = true;
    modSel.innerHTML = `<option value="">Select modification</option>`;
    modSel.disabled = true;
    submitBtn.disabled = true;
  };

  lineSel.onchange = () => {
    const make = state.vehicles.find(m => m.name === makeSel.value);
    const line = make && make.model_lines.find(l => l.name === lineSel.value);
    modelSel.innerHTML = `<option value="">Select model</option>` +
      (line ? [...line.models].sort((a,b) => fixOrdinals(a.name).localeCompare(fixOrdinals(b.name))).map(md => `<option value="${esc(md.name)}">${esc(fixOrdinals(md.name))}</option>`).join('') : '');
    modelSel.disabled = !line;
    modSel.innerHTML = `<option value="">Select modification</option>`;
    modSel.disabled = true;
    submitBtn.disabled = true;
  };

  modelSel.onchange = () => {
    const make = state.vehicles.find(m => m.name === makeSel.value);
    const line = make && make.model_lines.find(l => l.name === lineSel.value);
    const model = line && line.models.find(md => md.name === modelSel.value);
    modSel.innerHTML = `<option value="">Select modification</option>` +
      (model ? [...model.modifications].sort((a,b) => fixOrdinals(a.name).localeCompare(fixOrdinals(b.name))).map(md => `<option value="${md.id}">${esc(fixOrdinals(md.name))} (${esc(md.engine||'')} ${md.start||''}-${md.end||''})</option>`).join('') : '');
    modSel.disabled = !model;
    submitBtn.disabled = true;
  };

  modSel.onchange = () => { submitBtn.disabled = !modSel.value; };

  submitBtn.onclick = () => {
    const make = state.vehicles.find(m => m.name === makeSel.value);
    const line = make.model_lines.find(l => l.name === lineSel.value);
    const model = line.models.find(md => md.name === modelSel.value);
    const mod = model.modifications.find(md => md.id === modSel.value);
    saveVehicle({ makeName: make.name, modelLineName: line.name, modelName: model.name, mod });
    location.hash = `#/vehicle/${mod.id}`;
  };
}

/* ---------------- cart ---------------- */
function addToCart(productId, qty=1){
  const existing = state.cart.find(i => i.id === productId);
  if(existing) existing.qty += qty;
  else state.cart.push({ id: productId, qty });
  saveCart();
  showToast('Added to cart');
}
function removeFromCart(productId){
  state.cart = state.cart.filter(i => i.id !== productId);
  saveCart();
  route();
}
function setQty(productId, qty){
  const item = state.cart.find(i => i.id === productId);
  if(!item) return;
  item.qty = Math.max(1, qty);
  saveCart();
  route();
}
function updateCartCount(){
  const count = state.cart.reduce((s,i) => s+i.qty, 0);
  document.getElementById('cartCount').textContent = count;
}
function cartTotal(){
  return state.cart.reduce((s,i) => {
    const p = state.productsById[i.id];
    return s + (p ? p.price*i.qty : 0);
  }, 0);
}

/* ---------------- product card / grid ---------------- */
function productCardHtml(p){
  const disc = discountPct(p.price, p.mrp);
  const pCat = state.categoriesById[p.category_id];
  return `
    <div class="product-card">
      <a href="#/product/${p.id}">
        <div class="product-thumb">
          ${disc ? `<span class="badge">${disc}% OFF</span>` : (p.badge ? `<span class="badge">${esc(p.badge)}</span>` : '')}
          <span class="axle-tag">${esc(p.tag)}</span>
          ${pCat ? `<span class="cat-chip" title="${esc(pCat.name)}">${categoryIcon(pCat.name)}</span>` : ''}
          ${p.image ? `<img src="${esc(p.image)}" alt="${esc(p.name)}" loading="lazy" onerror="imgFallback(this, '${p.id}')">` : productPlaceholder(p)}
        </div>
      </a>
      <div class="product-body">
        <div class="product-brand">${esc(p.brand)}</div>
        <a href="#/product/${p.id}"><div class="product-name">${esc(p.name)}</div></a>
        <div class="product-price-row">
          <span class="price">${fmtPrice(p.price)}</span>
          ${p.mrp>p.price ? `<span class="mrp">${fmtPrice(p.mrp)}</span>` : ''}
          ${disc ? `<span class="discount">${disc}% off</span>` : ''}
        </div>
        <button class="btn btn-primary" onclick="addToCart('${p.id}')">Add to Cart</button>
      </div>
    </div>`;
}


/* ---------------- routing ---------------- */
const app = document.getElementById('app');

function route(){
  const hash = location.hash || '#/';
  const parts = hash.replace(/^#\//,'').split('/').filter(Boolean);
  window.scrollTo(0,0);
  qsa('.cat-nav-inner a').forEach(a => a.classList.remove('active'));
  updateProductJsonLd(null);

  if(parts.length === 0) return renderHome();
  if(parts[0] === 'category') return renderCategory(parts[1]);
  if(parts[0] === 'product') return renderProduct(parts[1]);
  if(parts[0] === 'search') return renderSearch(decodeURIComponent(parts[1]||''));
  if(parts[0] === 'vehicle') return renderVehicleResults(parts[1]);
  if(parts[0] === 'cart') return renderCart();
  if(parts[0] === 'checkout') return renderCheckout();
  if(parts[0] === 'order-success') return renderOrderSuccess();
  return renderHome();
}

/* ---------------- home ---------------- */
function renderHome(){
  setPageMeta(null, null);
  const top = topCategory();
  const children = shoppableTopCategories();
  const bestValue = [...state.products].sort((a,b)=> discountPct(b.price,b.mrp)-discountPct(a.price,a.mrp)).slice(0,10);
  const newest = state.products.slice(0,10);

  app.innerHTML = `
    <section class="hero">
      <div class="wrap hero-inner">
        <div>
          <h1>Genuine brake parts, matched to your exact vehicle.</h1>
          <p>Shop ${state.products.length}+ verified brake pads and components from trusted brands. Confirm fitment in seconds before you buy.</p>
          <div style="display:flex;gap:12px;flex-wrap:wrap">
            <a href="#/category/${top?top.id:''}" class="btn btn-primary">Shop Brake Pads</a>
          </div>
          <div class="hero-badges">
            <div class="hero-badge"><b>${state.products.length}+</b>Parts in catalog</div>
            <div class="hero-badge"><b>${new Set(state.products.map(p=>p.brand)).size}</b>Trusted brands</div>
            <div class="hero-badge"><b>${Object.keys(state.compatByMod).length}+</b>Vehicles supported</div>
          </div>
        </div>
        <div class="hero-vpanel">
          <h3>Find parts for your vehicle</h3>
          <p style="font-size:12.5px;color:#cfd1d8;margin:0 0 14px">Select your car to see guaranteed-fit parts only.</p>
          <button class="btn btn-primary btn-block" onclick="document.getElementById('vehicleModal').classList.add('open')">Select Make / Model / Engine</button>
        </div>
      </div>
    </section>

    <div class="trust-strip">
      <div class="trust-item"><b>Verified fitment</b>&nbsp;— match by exact modification</div>
      <div class="trust-item"><b>Trusted brands</b>&nbsp;— Bosch, Brembo, Ferodo &amp; more</div>
    </div>

    <section class="section wrap">
      <div class="section-head"><h2>Shop by category</h2></div>
      <div class="cat-grid">
        ${children.map(c => `
          <a class="cat-card" href="#/category/${c.id}">
            <div class="icon">${categoryIcon(c.name)}</div>
            <h3>${esc(c.name)}</h3>
            
          </a>`).join('')}
      </div>
    </section>

    <section class="section wrap">
      <div class="section-head"><h2>Best value deals</h2><a href="#/category/${top?top.id:''}">View all &rarr;</a></div>
      <div class="product-grid">${bestValue.map(productCardHtml).join('')}</div>
    </section>

    <section class="section wrap">
      <div class="section-head"><h2>More brake pads</h2><a href="#/category/${top?top.id:''}">View all &rarr;</a></div>
      <div class="product-grid">${newest.map(productCardHtml).join('')}</div>
    </section>
  `;
}
function icon(paths){
  return `<svg viewBox="0 0 48 48" fill="none">${paths}</svg>`;
}
const ICON_CUT = 'var(--paper)';
const CAT_ICONS = {
  brake_pads: icon(`
    <rect x="7" y="13" width="34" height="23" rx="8" fill="currentColor"/>
    <rect x="14" y="18" width="4" height="13" rx="2" fill="${ICON_CUT}"/>
    <rect x="22" y="18" width="4" height="13" rx="2" fill="${ICON_CUT}"/>
    <rect x="30" y="18" width="4" height="13" rx="2" fill="${ICON_CUT}"/>
  `),
  brake_disc: icon(`
    <circle cx="24" cy="24" r="18" fill="currentColor"/>
    <circle cx="24" cy="24" r="6.5" fill="${ICON_CUT}"/>
    <circle cx="24" cy="11.5" r="2.6" fill="${ICON_CUT}"/>
    <circle cx="35" cy="18.2" r="2.6" fill="${ICON_CUT}"/>
    <circle cx="35" cy="29.8" r="2.6" fill="${ICON_CUT}"/>
    <circle cx="24" cy="36.5" r="2.6" fill="${ICON_CUT}"/>
    <circle cx="13" cy="29.8" r="2.6" fill="${ICON_CUT}"/>
    <circle cx="13" cy="18.2" r="2.6" fill="${ICON_CUT}"/>
  `),
  brake_drums: icon(`
    <circle cx="24" cy="24" r="18" fill="currentColor"/>
    <circle cx="24" cy="24" r="12.5" fill="${ICON_CUT}"/>
    <circle cx="24" cy="24" r="7.5" fill="currentColor"/>
    <rect x="22" y="3.5" width="4" height="5" rx="2" fill="currentColor"/>
    <rect x="22" y="39.5" width="4" height="5" rx="2" fill="currentColor"/>
    <rect x="3.5" y="22" width="5" height="4" rx="2" fill="currentColor"/>
    <rect x="39.5" y="22" width="5" height="4" rx="2" fill="currentColor"/>
  `),
  brake_calipers: icon(`
    <path d="M17 6 C29 6 37 14 37 24 C37 34 29 42 17 42 L17 34 C25 34 29 30 29 24 C29 18 25 14 17 14 Z" fill="currentColor"/>
    <rect x="6" y="6" width="11" height="11" rx="3.5" fill="currentColor"/>
    <rect x="6" y="31" width="11" height="11" rx="3.5" fill="currentColor"/>
  `),
  brake_cylinder: icon(`
    <rect x="6" y="16" width="24" height="17" rx="5" fill="currentColor"/>
    <rect x="30" y="21.5" width="12" height="6" rx="3" fill="currentColor"/>
    <rect x="13" y="6" width="7" height="11" rx="3" fill="currentColor"/>
    <circle cx="12.5" cy="24.5" r="3" fill="${ICON_CUT}"/>
  `),
  vaccum_booster: icon(`
    <rect x="5" y="11" width="26" height="26" rx="8" fill="currentColor"/>
    <rect x="31" y="20" width="11" height="8" rx="3.5" fill="currentColor"/>
    <circle cx="33" cy="10" r="4" fill="currentColor"/>
    <circle cx="41" cy="7" r="2.8" fill="currentColor"/>
    <circle cx="46.5" cy="5.5" r="1.8" fill="currentColor"/>
  `),
  repair_kits: icon(`
    <rect x="6" y="20" width="36" height="19" rx="5" fill="currentColor"/>
    <rect x="6" y="27" width="36" height="4" fill="${ICON_CUT}"/>
    <path d="M16 20 v-4 a2 2 0 0 1 2 -2 h12 a2 2 0 0 1 2 2 v4" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
    <path d="M17 20 v-3 a1 1 0 0 1 1 -1 h12 a1 1 0 0 1 1 1 v3" fill="${ICON_CUT}"/>
  `),
  abs_system: icon(`
    <circle cx="17" cy="24" r="14" fill="currentColor"/>
    <circle cx="17" cy="24" r="6" fill="${ICON_CUT}"/>
    <circle cx="17" cy="24" r="2.4" fill="currentColor"/>
    <rect x="33" y="26" width="4.5" height="9" rx="2" fill="currentColor"/>
    <rect x="39.5" y="20" width="4.5" height="15" rx="2" fill="currentColor"/>
    <rect x="42" y="14" width="4.5" height="21" rx="2" fill="currentColor"/>
  `),
  brake_electronic: icon(`
    <rect x="10" y="10" width="28" height="28" rx="6" fill="currentColor"/>
    <rect x="17" y="17" width="14" height="14" rx="3" fill="${ICON_CUT}"/>
    <rect x="19" y="3" width="4" height="8" rx="2" fill="currentColor"/>
    <rect x="27" y="3" width="4" height="8" rx="2" fill="currentColor"/>
    <rect x="19" y="37" width="4" height="8" rx="2" fill="currentColor"/>
    <rect x="27" y="37" width="4" height="8" rx="2" fill="currentColor"/>
    <rect x="3" y="19" width="8" height="4" rx="2" fill="currentColor"/>
    <rect x="3" y="27" width="8" height="4" rx="2" fill="currentColor"/>
    <rect x="37" y="19" width="8" height="4" rx="2" fill="currentColor"/>
    <rect x="37" y="27" width="8" height="4" rx="2" fill="currentColor"/>
  `),
  brake_fluid: icon(`
    <path d="M24 4 C24 4 10 22 10 31 a14 14 0 0 0 28 0 C38 22 24 4 24 4 Z" fill="currentColor"/>
    <ellipse cx="18.5" cy="30" rx="3.4" ry="4.4" fill="${ICON_CUT}" opacity=".85"/>
  `),
  brake_hoses: icon(`
    <path d="M8 36 C8 24 20 30 20 20 C20 12 30 15 32 8" fill="none" stroke="currentColor" stroke-width="7" stroke-linecap="round"/>
    <circle cx="8" cy="36" r="6" fill="currentColor"/>
    <circle cx="32" cy="8" r="6" fill="currentColor"/>
    <circle cx="8" cy="36" r="2.4" fill="${ICON_CUT}"/>
    <circle cx="32" cy="8" r="2.4" fill="${ICON_CUT}"/>
  `),
  hand_brakes: icon(`
    <path d="M14 42 L31 7" fill="none" stroke="currentColor" stroke-width="8" stroke-linecap="round"/>
    <rect x="7" y="37" width="19" height="9" rx="3.5" fill="currentColor"/>
    <circle cx="31" cy="7" r="6" fill="currentColor"/>
    <rect x="26" y="16" width="9" height="5" rx="2" fill="currentColor"/>
  `),
  braking_system: icon(`
    <path d="M24 4 L40 11 V22 C40 33 33 41 24 44 C15 41 8 33 8 22 V11 Z" fill="currentColor"/>
    <circle cx="24" cy="23" r="9" fill="${ICON_CUT}"/>
    <circle cx="24" cy="23" r="3.4" fill="currentColor"/>
  `),
  default: icon(`
    <path d="M24 5 L30 10 L38 8 L38 16 L44 22 L38 28 L38 36 L30 34 L24 39 L18 34 L10 36 L10 28 L4 22 L10 16 L10 8 L18 10 Z" fill="currentColor"/>
    <circle cx="24" cy="22" r="7" fill="${ICON_CUT}"/>
  `),
};
function categoryIcon(name){
  const n = (name || '').toLowerCase();
  let key = 'default';
  if(n.includes('pad')) key = 'brake_pads';
  else if(n.includes('drum')) key = 'brake_drums';
  else if(n.includes('disc') || n.includes('disk')) key = 'brake_disc';
  else if(n.includes('caliper')) key = 'brake_calipers';
  else if(n.includes('cylinder')) key = 'brake_cylinder';
  else if(n.includes('vaccum') || n.includes('vacuum') || n.includes('booster')) key = 'vaccum_booster';
  else if(n.includes('repair') || n.includes('kit')) key = 'repair_kits';
  else if(n.includes('abs')) key = 'abs_system';
  else if(n.includes('electronic')) key = 'brake_electronic';
  else if(n.includes('fluid')) key = 'brake_fluid';
  else if(n.includes('hose') || n.includes('line')) key = 'brake_hoses';
  else if(n.includes('hand brake') || n.includes('handbrake')) key = 'hand_brakes';
  else if(n.includes('braking system')) key = 'braking_system';
  return CAT_ICONS[key] || CAT_ICONS.default;
}


/* ---------------- category listing ---------------- */
function renderCategory(catId){
  const cat = state.categoriesById[catId];
  if(!cat){ app.innerHTML = `<div class="wrap section"><p>Category not found.</p></div>`; return; }

  // include this category + descendants
  const idsInScope = new Set([catId]);
  let frontier = [catId];
  while(frontier.length){
    const next = [];
    state.categories.forEach(c => { if(c.parent && frontier.includes(c.parent)){ idsInScope.add(c.id); next.push(c.id); } });
    frontier = next;
  }
  let list = state.products.filter(p => idsInScope.has(p.category_id));

  renderListingPage(cat.name, catBreadcrumb(catId), list, {
    subcats: catChildren(catId).filter(c => productCountInScope(c.id) > 0),
    activeCatId: catId,
    metaTitle: cat.seo_title || cat.name,
metaDescription: cat.seo_desc,
  });
}

function emptyStateHtml(hasFilters){
return `<div class="empty-state" style="grid-column:1/-1">
<svg viewBox="0 0 24 24" width="48" height="48"><path fill="currentColor" d="M11 2a9 9 0 1 0 5.6 16.03l4.68 4.68 1.42-1.42-4.68-4.68A9 9 0 0 0 11 2zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm-1 3v5l4 2 .75-1.3-3.25-1.7V7z"/></svg>
<p>${hasFilters ? 'No products match your selected filters.' : 'No products found here yet.'}</p>
<div class="empty-actions">
${hasFilters ? `<button class="btn btn-outline" id="clearFiltersBtn">Clear Filters</button>` : ''}
<a class="btn btn-outline" href="#/">Browse All Categories</a>
<button class="btn btn-outline" onclick="document.getElementById('vehicleModal').classList.add('open')">Find Parts for My Vehicle</button>
</div>
</div>`;
}

function renderListingPage(title, breadcrumbChain, list, opts={}){
  setPageMeta(opts.metaTitle || title, opts.metaDescription || `Browse ${list.length} result${list.length!==1?'s':''} for ${title} at NoirParts — genuine, verified-fitment brake parts with fast dispatch.`);
  const brands = [...new Set(state.products.map(p=>p.brand))].sort();
  const state_ = { brand: new Set(), axle: new Set(), sort: 'relevance' };

  function apply(){
    let out = list.filter(p =>
      (state_.brand.size===0 || state_.brand.has(p.brand)) &&
      (state_.axle.size===0 || state_.axle.has(p.tag))
    );
    if(state_.sort==='price-asc') out = [...out].sort((a,b)=>a.price-b.price);
    if(state_.sort==='price-desc') out = [...out].sort((a,b)=>b.price-a.price);
    if(state_.sort==='discount') out = [...out].sort((a,b)=>discountPct(b.price,b.mrp)-discountPct(a.price,a.mrp));
    qs('#resultCount').textContent = `${out.length} product${out.length!==1?'s':''}`;
    qs('#gridTarget').innerHTML = out.length ? out.map(productCardHtml).join('') :
      emptyStateHtml(state_.brand.size>0 || state_.axle.size>0);
  }

  app.innerHTML = `
    <div class="page-title-bar">
      <div class="wrap">
        <div class="breadcrumb">
          <a href="#/">Home</a> ${breadcrumbChain.map(c=>` / <a href="#/category/${c.id}">${esc(c.name)}</a>`).join('')}
        </div>
      </div>
    </div>
    <div class="wrap section">
      ${opts.subcats && opts.subcats.length ? `
        <div class="cat-grid" style="margin-bottom:26px">
          ${opts.subcats.map(c => `<a class="cat-card" href="#/category/${c.id}"><div class="icon">${categoryIcon(c.name)}</div><h3>${esc(c.name)}</h3></a>`).join('')}
        </div>` : ''}
      <div class="listing">
        <aside class="filters">
          <h4>Find Your Vehicle</h4>
          <div class="vehicle-search-mini" style="display:flex;flex-direction:column;gap:8px;margin-top:6px">
            <select id="lsMake" style="width:100%;padding:8px;border:1px solid #d8d5cd;border-radius:6px;background:#fff"><option value="">Select make</option>${[...state.vehicles].sort((a,b)=>properMake(a.name).localeCompare(properMake(b.name))).map(m=>`<option value="${esc(m.name)}">${esc(properMake(m.name))}</option>`).join('')}</select>
            <select id="lsModelLine" style="width:100%;padding:8px;border:1px solid #d8d5cd;border-radius:6px;background:#fff" disabled><option value="">Select model line</option></select>
            <select id="lsModel" style="width:100%;padding:8px;border:1px solid #d8d5cd;border-radius:6px;background:#fff" disabled><option value="">Select model</option></select>
            <select id="lsMod" style="width:100%;padding:8px;border:1px solid #d8d5cd;border-radius:6px;background:#fff" disabled><option value="">Select modification</option></select>
            <button id="lsSubmit" class="btn btn-primary btn-block" disabled>Show compatible parts</button>
          </div>
          <h4>Brand</h4>
          ${brands.map(b => `<label class="filter-opt"><input type="checkbox" data-brand="${esc(b)}"> ${esc(b)}</label>`).join('')}
          <h4>Fitment</h4>
          <label class="filter-opt"><input type="checkbox" data-axle="Front Axle"> Front Axle</label>
          <label class="filter-opt"><input type="checkbox" data-axle="Rear Axle"> Rear Axle</label>
          <label class="filter-opt"><input type="checkbox" data-axle="Universal Fit"> Universal Fit</label>
        </aside>
        <div>
          <div class="listing-head">
            <div>
              <h1>${esc(title)}</h1>
              <div class="result-count" id="resultCount"></div>
            </div>
            <select class="sort-select" id="sortSelect">
              <option value="relevance">Sort: Relevance</option>
              <option value="price-asc">Price: Low to High</option>
              <option value="price-desc">Price: High to Low</option>
              <option value="discount">Best Discount</option>
            </select>
          </div>
          <div class="product-grid" id="gridTarget"></div>
        </div>
      </div>
    </div>
  `;

  qsa('input[data-brand]').forEach(cb => cb.onchange = () => {
    cb.checked ? state_.brand.add(cb.dataset.brand) : state_.brand.delete(cb.dataset.brand); apply();
  });
  qsa('input[data-axle]').forEach(cb => cb.onchange = () => {
    cb.checked ? state_.axle.add(cb.dataset.axle) : state_.axle.delete(cb.dataset.axle); apply();
  });
  qs('#sortSelect').onchange = (e) => { state_.sort = e.target.value; apply(); };
  qs('#gridTarget').addEventListener('click', (e) => {
if(e.target.id === 'clearFiltersBtn'){
state_.brand.clear(); state_.axle.clear();
qsa('input[data-brand]').forEach(cb => cb.checked = false);
qsa('input[data-axle]').forEach(cb => cb.checked = false);
apply();
}
});
  wireSidebarVehiclePicker();
  apply();
}

/* ---------------- search ---------------- */
function renderSearch(query){
  const qRaw = (query||'').trim();
  if(!qRaw){ renderListingPage(`Search results for ""`, [], []); return; }
  const qLower = qRaw.toLowerCase();
  const STOPWORDS = new Set(['for','and','with','the','of','in','on','at','to','a','an','is','my','your','car','vehicle']);
  const qTokens = qLower.split(/[^a-z0-9]+/).filter(t => t.length >= 2 && !STOPWORDS.has(t));
  // Generic part/category words should never count as a vehicle-name match (e.g. a Mercedes
  // "Shooting Brake" body style shouldn't hijack a search for "brake pads") — they're still kept
  // in qTokens so they narrow the product results once a vehicle (or no vehicle) is resolved.
  const PART_WORDS = new Set(['brake','brakes','pad','pads','disc','disk','discs','drum','drums','shoe','shoes',
    'caliper','calipers','cylinder','cylinders','booster','boosters','kit','kits','fluid','fluids','hose','hoses',
    'abs','electronic','repair','vaccum','vacuum','set','front','rear','universal','fit','genuine','spare','part','parts']);

  function matchesProductText(p, text){
    if(!text) return true;
    if(p.name.toLowerCase().includes(text) ||
      p.brand.toLowerCase().includes(text) ||
      p.part_number.toLowerCase().includes(text) ||
      p.id.toLowerCase().includes(text)) return true;
    const normText = text.replace(/[\s\-\.\/]/g, '');
    return normText.length >= 3 && !!p.part_number && p.part_number.toLowerCase().replace(/[\s\-\.\/]/g, '').includes(normText);
  }

  function wordsOf(str){
    return new Set((str||'').toLowerCase().split(/[^a-z0-9]+/).filter(Boolean));
  }

  // Score candidate vehicle names (make / model-line / model) by how many query tokens they match
  // as WHOLE WORDS (not raw substrings — otherwise short words like "for" would false-positive match
  // inside names like "Forester"), so searches like "dzire brake pads" or "thar 1st generation"
  // resolve to compatible parts. Broader matches (make, then line) win by default; a more specific
  // match only overrides when it consumes strictly more query tokens.
  // Tie-break preference when two vehicle-name levels match the same number of tokens: prefer the
  // model LINE (e.g. "Dzire", "Baleno") over both the bare MAKE (too broad) and a specific MODEL/
  // generation (too narrow — the user didn't actually ask for a generation, so don't guess one).
  const TIE_PRIORITY = { make: 0, model: 1, line: 2 };

  let best = null;
  function consider(nameLc, modIds, label, level){
    const nameWords = wordsOf(nameLc);
    const consumed = new Set();
    qTokens.forEach(t => { if(!PART_WORDS.has(t) && nameWords.has(t)) consumed.add(t); });
    if(!consumed.size) return;
    const score = consumed.size;
    const tiePriority = TIE_PRIORITY[level];
    if(!best || score > best.score || (score === best.score && tiePriority > best.tiePriority)){
      best = { score, tiePriority, modIds, label, consumedTokens: consumed };
    }
  }

  state.vehicles.forEach(make => {
    const makeLc = make.name.toLowerCase();
    const makeModIds = new Set();
    make.model_lines.forEach(line => line.models.forEach(m2 => m2.modifications.forEach(md => makeModIds.add(md.id))));
    consider(makeLc, makeModIds, properMake(make.name), 'make');

    make.model_lines.forEach(line => {
      const lineLc = line.name.toLowerCase();
      const lineModIds = new Set();
      line.models.forEach(m2 => m2.modifications.forEach(md => lineModIds.add(md.id)));
      consider(lineLc, lineModIds, `${properMake(make.name)} ${fixOrdinals(line.name)}`, 'line');

      line.models.forEach(model => {
        const modelLc = model.name.toLowerCase();
        const modelModIds = new Set(model.modifications.map(md => md.id));
        consider(modelLc, modelModIds, `${properMake(make.name)} ${fixOrdinals(model.name)}`, 'model');
      });
    });
  });

  let list, title, metaDescription;
  if(best){
    const vehicleProductIds = new Set();
    best.modIds.forEach(modId => (state.compatByMod[modId]||[]).forEach(pid => vehicleProductIds.add(pid)));
    let candidates = [...vehicleProductIds].map(id => state.productsById[id]).filter(Boolean);
    const remainderTokens = qTokens.filter(t => !best.consumedTokens.has(t));
    if(remainderTokens.length){
      const narrowed = candidates.filter(p => remainderTokens.every(t => matchesProductText(p, t)));
      if(narrowed.length) candidates = narrowed;
    }
    list = candidates;
    title = `Search results for "${qRaw}" — parts for ${best.label}`;
    metaDescription = `${list.length} genuine part${list.length!==1?'s':''} matched to ${best.label} at NoirParts. Verified fitment, fast dispatch, COD available.`;
  } else {
    list = state.products.filter(p => matchesProductText(p, qLower));
    title = `Search results for "${qRaw}"`;
    metaDescription = `${list.length} result${list.length!==1?'s':''} for "${qRaw}" at NoirParts — genuine brake parts with verified fitment.`;
  }

  renderListingPage(title, [], list, { metaDescription });
}



/* ---------------- vehicle results ---------------- */
function renderVehicleResults(modId){
  const productIds = state.compatByMod[modId] || [];
  const list = productIds.map(id => state.productsById[id]).filter(Boolean);
  const v = state.selectedVehicle;
  const label = v && v.mod.id === modId ? `${properMake(v.makeName)} ${fixOrdinals(v.modelName)} — ${v.mod.name}` : 'Selected Vehicle';
  renderListingPage(`Parts for ${label}`, [], list);
  // Insert a helpful banner above the grid
  const bar = document.querySelector('.page-title-bar .wrap');
  if(bar){
    const banner = document.createElement('div');
    banner.className = 'fit-banner';
    banner.style.marginTop = '10px';
    banner.innerHTML = list.length
      ? `✓ Showing ${list.length} part(s) verified to fit your ${esc(label)}.`
      : `No parts found for this exact vehicle yet — try browsing all categories.`;
    if(!list.length) banner.classList.add('no');
    bar.appendChild(banner);
  }
}

/* ---------------- product detail ---------------- */
function displayDescription(p){
const idx = p.description.indexOf('OEM-quality');
if(idx === -1) return p.description;
return `Genuine ${p.brand} ${p.name}. ${p.description.slice(idx)}`;
}

function renderProduct(id){
  const p = state.productsById[id];
  if(!p){ app.innerHTML = `<div class="wrap section"><p>Product not found.</p></div>`; return; }
  setPageMeta(`${p.name} — ${p.brand}`, `Buy ${p.name} by ${p.brand} at NoirParts. ${fmtPrice(p.price)}, verified fitment, fast dispatch, COD available.`);
  updateProductJsonLd({
"@context": "https://schema.org/",
"@type": "Product",
name: p.name,
sku: p.id,
...(p.part_number ? { mpn: p.part_number } : {}),
brand: { "@type": "Brand", name: p.brand },
description: p.description,
offers: {
"@type": "Offer",
url: location.href,
priceCurrency: "INR",
price: String(p.price),
availability: "https://schema.org/InStock",
itemCondition: "https://schema.org/NewCondition"
}
});
  const disc = discountPct(p.price, p.mrp);
  const chain = catBreadcrumb(p.category_id);
  const compatMods = state.compatByProduct[p.id] || [];
  const v = state.selectedVehicle;
  const fitsSelected = v && compatMods.includes(v.mod.id);

  const related = state.products.filter(x => x.category_id===p.category_id && x.id!==p.id).slice(0,6);

  app.innerHTML = `
    <div class="page-title-bar">
      <div class="wrap">
        <div class="breadcrumb">
          <a href="#/">Home</a> ${chain.map(c=>` / <a href="#/category/${c.id}">${esc(c.name)}</a>`).join('')} / ${esc(p.name)}
        </div>
      </div>
    </div>
    <div class="wrap section">
      <div class="pd-grid">
        <div>
          <div class="pd-image">
            ${p.image ? `<img src="${esc(p.image)}" alt="${esc(p.name)}" onerror="imgFallback(this, '${p.id}')">` : productPlaceholder(p)}
          </div>
        </div>
        <div>
          <div class="product-brand">${esc(p.brand)}</div>
          <h1 class="pd-title">${esc(p.name)}</h1>
          <div class="pd-meta">Part Number: <b>${esc(p.part_number || '—')}</b> &nbsp;·&nbsp; Fitment: <b>${esc(p.tag)}</b></div>

          ${v ? `
            <div class="fit-banner ${fitsSelected ? '' : 'no'}">
              ${fitsSelected ? `✓ Fits your ${esc(properMake(v.makeName))} ${esc(fixOrdinals(v.modelName))} (${esc(v.mod.name)})` : `⚠ Not confirmed to fit your selected ${esc(properMake(v.makeName))} ${esc(fixOrdinals(v.modelName))} — check compatibility list below`}
            </div>` : `
            <div class="fit-banner no" style="background:#fff8e6;border-color:#f0dca0;color:#8a6d1a">
              Select your vehicle to confirm fitment. <a href="#" onclick="event.preventDefault();document.getElementById('vehicleModal').classList.add('open')" style="text-decoration:underline;font-weight:700">Choose vehicle</a>
            </div>`}

          <div class="pd-price-box">
            <div class="product-price-row" style="margin-bottom:4px">
              <span class="pd-price">${fmtPrice(p.price)}</span>
              ${p.mrp>p.price ? `<span class="mrp">${fmtPrice(p.mrp)}</span>` : ''}
              ${disc ? `<span class="discount">${disc}% off</span>` : ''}
            </div>
            <div style="font-size:12px;color:var(--muted)">Inclusive of all taxes</div>
            <div class="pd-actions">
              <div class="qty-box">
                <button onclick="stepQty(-1)">−</button>
                <input type="text" id="pdQty" value="1" readonly>
                <button onclick="stepQty(1)">+</button>
              </div>
              <button class="btn btn-primary" style="flex:2" onclick="addToCart('${p.id}', parseInt(document.getElementById('pdQty').value)); ">Add to Cart</button>
              <button class="btn btn-dark" onclick="addToCart('${p.id}', parseInt(document.getElementById('pdQty').value)); location.hash='#/cart'">Buy Now</button>
            </div>
          </div>

          <div class="pd-section">
            <h3>Description</h3>
            <p style="font-size:14px;line-height:1.6;color:#3c3f46">${esc(displayDescription(p))}</p>
          </div>

          ${Object.entries(p.specs).filter(([k]) => !['Address of Manufacturer','Marketed by'].includes(k)).length ? `
          <div class="pd-section">
            <h3>Specifications</h3>
            <table class="spec-table">
              ${Object.entries(p.specs).filter(([k]) => !['Address of Manufacturer','Marketed by'].includes(k)).map(([k,val]) => `<tr><td>${esc(k)}</td><td>${esc(val)}</td></tr>`).join('')}
            </table>
          </div>` : ''}

          <div class="pd-section">
            <h3>Compatible Vehicles (${compatMods.length})</h3>
            <div class="compat-list">
              ${compatMods.slice(0,60).map(modId => {
                const row = findVehicleByModId(modId);
                return row ? `<div class="compat-row"><span>${esc(properMake(row.make))} ${esc(fixOrdinals(row.model))}</span><span>${esc(row.mod.name)} · ${row.mod.start||''}-${row.mod.end||''}</span></div>` : '';
              }).join('') || '<div class="compat-row">Compatibility data not available.</div>'}
              ${compatMods.length>60 ? `<div class="compat-row" style="color:var(--muted)">+ ${compatMods.length-60} more vehicles</div>` : ''}
            </div>
          </div>
        </div>
      </div>

      ${related.length ? `
      <section class="section" style="padding-left:0;padding-right:0">
        <div class="section-head"><h2>You may also need</h2></div>
        <div class="product-grid">${related.map(productCardHtml).join('')}</div>
      </section>` : ''}
    </div>
  `;
}
function stepQty(delta){
  const el = document.getElementById('pdQty');
  el.value = Math.max(1, parseInt(el.value||'1') + delta);
}
function findVehicleByModId(modId){
  for(const make of state.vehicles){
    for(const line of make.model_lines){
      for(const model of line.models){
        const mod = model.modifications.find(m => m.id === modId);
        if(mod) return { make: make.name, model: model.name, mod };
      }
    }
  }
  return null;
}

/* ---------------- cart page ---------------- */

async function goToRealCheckout(btn){
  if(btn){ btn.disabled = true; btn.textContent = 'Preparing checkout…'; }
  try {
    for(const item of state.cart){
      const p = state.productsById[item.id];
      if(!p || !p.odoo_product_id || !p.odoo_template_id) continue;
      const res = await fetch('/shop/cart/add', {
        method: 'POST', credentials: 'same-origin',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify({jsonrpc:'2.0', method:'call', params:{
          product_id: p.odoo_product_id, product_template_id: p.odoo_template_id, quantity: item.qty
        }})
      });
      const j = await res.json();
      if(j.error) throw new Error((j.error.data && j.error.data.message) || 'Could not add ' + p.name + ' to cart');
    }
    window.location.href = '/shop/cart';
  } catch(e){
    if(btn){ btn.disabled = false; btn.textContent = 'Proceed to Checkout'; }
    alert('Sorry, something went wrong preparing your order. Please try again.\n' + (e.message||''));
  }
}

function renderCart(){
  setPageMeta('Your Cart', 'Review the items in your NoirParts shopping cart before checkout.');
  if(!state.cart.length){
    app.innerHTML = `
      <div class="wrap section">
        <div class="empty-state">
          <svg viewBox="0 0 24 24" width="64" height="64"><path fill="currentColor" d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12L8.1 13h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
          <h3>Your cart is empty</h3>
          <p>Browse our catalog and add genuine brake parts to your cart.</p>
          <a href="#/" class="btn btn-primary">Start Shopping</a>
        </div>
      </div>`;
    return;
  }
  const rows = state.cart.map(item => {
    const p = state.productsById[item.id];
    if(!p) return '';
    return `
    <tr>
      <td>
        <div class="cart-item">
          ${p.image ? `<img src="${esc(p.image)}" alt="">` : `<div style="width:56px;height:56px;background:#f0f1f3;border-radius:6px"></div>`}
          <div>
            <a href="#/product/${p.id}" class="cart-item-name">${esc(p.name)}</a>
            <div class="cart-item-brand">${esc(p.brand)}</div>
          </div>
        </div>
      </td>
      <td>${fmtPrice(p.price)}</td>
      <td>
        <div class="qty-box">
          <button onclick="setQty('${p.id}', ${item.qty-1})">−</button>
          <input type="text" value="${item.qty}" readonly>
          <button onclick="setQty('${p.id}', ${item.qty+1})">+</button>
        </div>
      </td>
      <td>${fmtPrice(p.price*item.qty)}</td>
      <td><a href="#" class="remove-link" onclick="event.preventDefault(); removeFromCart('${p.id}')">Remove</a></td>
    </tr>`;
  }).join('');

  const total = cartTotal();
  const shipping = total >= 1500 ? 0 : 99;

  app.innerHTML = `
    <div class="wrap section">
      <h1 style="font-size:22px;margin-bottom:18px">Shopping Cart</h1>
      <div class="cart-layout">
        <table class="cart-table">
          <thead><tr><th>Product</th><th>Price</th><th>Quantity</th><th>Subtotal</th><th></th></tr></thead>
          <tbody>${rows}</tbody>
        </table>
        <div class="summary-box">
          <h3 style="margin-top:0;font-size:15px">Order Summary</h3>
          <div class="summary-row"><span>Subtotal</span><span>${fmtPrice(total)}</span></div>
          <div class="summary-row"><span>Shipping</span><span>${shipping===0?'FREE':fmtPrice(shipping)}</span></div>
          <div class="summary-row total"><span>Total</span><span>${fmtPrice(total+shipping)}</span></div>
          <button class="btn btn-primary btn-block" onclick="goToRealCheckout(this)">Proceed to Checkout</button>
          <a href="#/" style="display:block;text-align:center;margin-top:10px;font-size:13px;color:var(--muted)">Continue shopping</a>
        </div>
      </div>
    </div>`;
}

/* ---------------- checkout (UI only — no real payment is processed) ---------------- */
function renderCheckout(){
  if(!state.cart.length){ location.hash = '#/cart'; return; }
  setPageMeta('Checkout', 'Secure checkout for your NoirParts order — COD available across India.');
  const total = cartTotal();
  const shipping = total >= 1500 ? 0 : 99;

  app.innerHTML = `
    <div class="wrap section">
      <h1 style="font-size:22px;margin-bottom:18px">Checkout</h1>
      <div class="cart-layout">
        <form class="checkout-form" id="checkoutForm">
          <h3 style="margin-top:0;font-size:15px">Shipping Details</h3>
          <div class="form-row"><label>Full Name</label><input required name="name" placeholder="Your full name"></div>
          <div class="form-grid-2">
            <div class="form-row"><label>Phone</label><input required name="phone" placeholder="10-digit mobile number" pattern="[0-9]{10}"></div>
            <div class="form-row"><label>Pincode</label><input required name="pincode" placeholder="6-digit pincode" pattern="[0-9]{6}"></div>
          </div>
          <div class="form-row"><label>Address</label><input required name="address" placeholder="House no, street, area"></div>
          <div class="form-grid-2">
            <div class="form-row"><label>City</label><input required name="city" placeholder="City"></div>
            <div class="form-row"><label>State</label><input required name="state" placeholder="State"></div>
          </div>
          <h3 style="font-size:15px">Payment Method</h3>
          <div class="form-row">
            <label class="filter-opt"><input type="radio" name="payment" value="cod" checked> Cash on Delivery</label>
            <label class="filter-opt"><input type="radio" name="payment" value="online"> Pay Online (UPI / Card / Netbanking)</label>
          </div>
          <button class="btn btn-primary btn-block" type="submit">Place Order — ${fmtPrice(total+shipping)}</button>
        </form>
        <div class="summary-box">
          <h3 style="margin-top:0;font-size:15px">Order Summary</h3>
          ${state.cart.map(i => {
            const p = state.productsById[i.id]; if(!p) return '';
            return `<div class="summary-row"><span>${esc(p.name)} × ${i.qty}</span><span>${fmtPrice(p.price*i.qty)}</span></div>`;
          }).join('')}
          <div class="summary-row"><span>Shipping</span><span>${shipping===0?'FREE':fmtPrice(shipping)}</span></div>
          <div class="summary-row total"><span>Total</span><span>${fmtPrice(total+shipping)}</span></div>
        </div>
      </div>
    </div>`;

  document.getElementById('checkoutForm').onsubmit = (e) => {
    e.preventDefault();
    // Demo storefront: no real payment gateway is connected — this simulates order placement only.
    state.cart = [];
    saveCart();
    location.hash = '#/order-success';
  };
}

function renderOrderSuccess(){
  setPageMeta('Order Confirmed', 'Your NoirParts order has been placed successfully.');
  app.innerHTML = `
    <div class="wrap section">
      <div class="order-success">
        <svg viewBox="0 0 24 24" width="64" height="64"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
        <h2>Order placed successfully!</h2>
        <p>Thank you for shopping with Noirparts. This is a demo storefront — no payment has actually been charged. A confirmation would normally be sent to your email.</p>
        <a href="#/" class="btn btn-primary">Continue Shopping</a>
      </div>
    </div>`;
}

/* ---------------- search form wiring ---------------- */
document.getElementById('searchForm').addEventListener('submit', (e) => {
  e.preventDefault();
  const q = document.getElementById('searchInput').value.trim();
  if(q) location.hash = `#/search/${encodeURIComponent(q)}`;
});


/* ---------------- search suggestions ---------------- */
(function(){
  const searchForm = document.getElementById('searchForm');
  if(!searchForm) return;
  const searchInput = document.getElementById('searchInput');
  const wrap = document.createElement('div');
  wrap.className = 'search-wrap';
  searchForm.parentNode.insertBefore(wrap, searchForm);
  wrap.appendChild(searchForm);
  const box = document.createElement('div');
  box.id = 'searchSuggest';
  box.className = 'search-suggest';
  wrap.appendChild(box);

  const SS_STOPWORDS = new Set(['for','and','with','the','of','in','on','at','to','a','an','is','my','your','car','vehicle']);
  const SS_PART_WORDS = new Set(['brake','brakes','pad','pads','disc','disk','discs','drum','drums','shoe','shoes',
    'caliper','calipers','cylinder','cylinders','booster','boosters','kit','kits','fluid','fluids','hose','hoses',
    'abs','electronic','repair','vaccum','vacuum','set','front','rear','universal','fit','genuine','spare','part','parts']);
  const SS_TIE_PRIORITY = { make: 0, model: 1, line: 2 };

  let categoriesWithProducts = null;
  function ssCategoriesWithProducts(){
    if(categoriesWithProducts) return categoriesWithProducts;
    categoriesWithProducts = new Set();
    (state.products||[]).forEach(p => { if(p.category_id) categoriesWithProducts.add(p.category_id); });
    return categoriesWithProducts;
  }

  function ssWordsOf(str){ return new Set((str||'').toLowerCase().split(/[^a-z0-9]+/).filter(Boolean)); }
  function ssMatchesProductText(p, text){
    if(!text) return true;
    if(p.name.toLowerCase().includes(text) || p.brand.toLowerCase().includes(text) ||
      p.part_number.toLowerCase().includes(text) || p.id.toLowerCase().includes(text)) return true;
    const normText = text.replace(/[\s\-\.\/]/g, '');
    return normText.length >= 3 && !!p.part_number && p.part_number.toLowerCase().replace(/[\s\-\.\/]/g, '').includes(normText);
  }

  function ssFindVehicle(qTokens){
    let best = null;
    function consider(nameLc, modIds, label, level){
      const nameWords = ssWordsOf(nameLc);
      const consumed = new Set();
      qTokens.forEach(t => { if(!SS_PART_WORDS.has(t) && nameWords.has(t)) consumed.add(t); });
      if(!consumed.size) return;
      const score = consumed.size;
      const tiePriority = SS_TIE_PRIORITY[level];
      if(!best || score > best.score || (score === best.score && tiePriority > best.tiePriority)){
        best = { score, tiePriority, modIds, label, consumedTokens: consumed };
      }
    }
    state.vehicles.forEach(make => {
      const makeLc = make.name.toLowerCase();
      const makeModIds = new Set();
      make.model_lines.forEach(line => line.models.forEach(m2 => m2.modifications.forEach(md => makeModIds.add(md.id))));
      consider(makeLc, makeModIds, properMake(make.name), 'make');
      make.model_lines.forEach(line => {
        const lineLc = line.name.toLowerCase();
        const lineModIds = new Set();
        line.models.forEach(m2 => m2.modifications.forEach(md => lineModIds.add(md.id)));
        consider(lineLc, lineModIds, `${properMake(make.name)} ${fixOrdinals(line.name)}`, 'line');
        line.models.forEach(model => {
          const modelLc = model.name.toLowerCase();
          const modelModIds = new Set(model.modifications.map(md => md.id));
          consider(modelLc, modelModIds, `${properMake(make.name)} ${fixOrdinals(model.name)}`, 'model');
        });
      });
    });
    return best;
  }

  function ssGetResults(qRaw){
    const qLower = qRaw.toLowerCase();
    const qTokens = qLower.split(/[^a-z0-9]+/).filter(t => t.length >= 2 && !SS_STOPWORDS.has(t));
    const vehicle = ssFindVehicle(qTokens);
    let candidates;
    if(vehicle){
      const vehicleProductIds = new Set();
      vehicle.modIds.forEach(modId => (state.compatByMod[modId]||[]).forEach(pid => vehicleProductIds.add(pid)));
      candidates = [...vehicleProductIds].map(id => state.productsById[id]).filter(Boolean);
      const remainderTokens = qTokens.filter(t => !vehicle.consumedTokens.has(t));
      if(remainderTokens.length){
        const narrowed = candidates.filter(p => remainderTokens.every(t => ssMatchesProductText(p, t)));
        if(narrowed.length) candidates = narrowed;
      }
    } else {
      candidates = state.products.filter(p => ssMatchesProductText(p, qLower));
    }
    const withProducts = ssCategoriesWithProducts();
    const categories = Object.values(state.categoriesById || {}).filter(c => {
      if(!c.leaf || !withProducts.has(c.id)) return false;
      const cWords = ssWordsOf(c.name);
      return qTokens.some(t => cWords.has(t));
    }).slice(0, 2);
    return { vehicle, candidates, categories };
  }

  function ssProductThumb(p){
    const cat = state.categoriesById && state.categoriesById[p.category_id];
    const icon = cat ? categoryIcon(cat.name) : CAT_ICONS.default;
    return `<span class="ss-thumb">${icon}</span>`;
  }

  function ssRender(qRaw){
    const { vehicle, candidates, categories } = ssGetResults(qRaw);
    let html = '';
    if(vehicle){
      html += `<div class="ss-vehicle" data-hash="#/search/${encodeURIComponent(qRaw)}">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M5 11l1.5-4.5A2 2 0 0 1 8.4 5h7.2a2 2 0 0 1 1.9 1.5L19 11H5zm-2 2a2 2 0 0 0-1 1.7V18a1 1 0 0 0 1 1h1.09a1.5 1.5 0 0 0 2.82 0h6.18a1.5 1.5 0 0 0 2.82 0H19a1 1 0 0 0 1-1v-3.3a2 2 0 0 0-1-1.7H3zM6.5 17a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm11 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>
        <span>Parts for <b>${esc(vehicle.label)}</b> — ${candidates.length} found</span>
      </div>`;
    }
    if(categories.length){
      html += `<div class="ss-section-label">Categories</div>`;
      categories.forEach(c => {
        html += `<div class="ss-product" data-hash="#/category/${esc(c.id)}">
          <span class="ss-thumb">${categoryIcon(c.name)}</span>
          <span class="ss-product-name">${esc(c.name)}</span>
        </div>`;
      });
    }
    const top = candidates.slice(0, 5);
    if(top.length){
      html += `<div class="ss-section-label">Products</div>`;
      top.forEach(p => {
        html += `<div class="ss-product" data-hash="#/product/${esc(p.id)}">
          ${ssProductThumb(p)}
          <span class="ss-product-name">${esc(p.name)}</span>
          <span class="ss-product-price">${fmtPrice(p.price)}</span>
        </div>`;
      });
    }
    if(!vehicle && !top.length && !categories.length){
      html += `<div class="ss-empty">No matches yet — press Enter to search all products.</div>`;
    }
    if(candidates.length > top.length || vehicle){
      html += `<a class="ss-viewall" data-hash="#/search/${encodeURIComponent(qRaw)}">View all${candidates.length ? ' '+candidates.length : ''} results for "${esc(qRaw)}"</a>`;
    }
    box.innerHTML = html;
    box.querySelectorAll('[data-hash]').forEach(el => {
      el.addEventListener('mousedown', (e) => {
        e.preventDefault();
        location.hash = el.getAttribute('data-hash');
        ssHide();
      });
    });
  }

  function ssShow(){ box.classList.add('open'); }
  function ssHide(){ box.classList.remove('open'); }

  let ssTimer = null;
  searchInput.addEventListener('input', () => {
    clearTimeout(ssTimer);
    const q = searchInput.value.trim();
    if(q.length < 2){ ssHide(); return; }
    ssTimer = setTimeout(() => { ssRender(q); ssShow(); }, 200);
  });
  searchInput.addEventListener('focus', () => {
    const q = searchInput.value.trim();
    if(q.length >= 2){ ssRender(q); ssShow(); }
  });
  searchInput.addEventListener('blur', () => { setTimeout(ssHide, 150); });
  searchInput.addEventListener('keydown', (e) => { if(e.key === 'Escape') ssHide(); });
})();


wireVehiclePicker();
boot();

/* cache-bust-fix */